<template>
  <div class="container" v-if="showType">
    <div class="cover"></div>
    <div class="wrap">
      <div class="title">选择机构</div>
      <div class="listerTree">
        <el-input class="searchs" style="margin-top:20px" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          ref="tree"
        ></el-tree>
      </div>
      <div class="operation">
        <el-button style="margin-left:70px" type="primary" size="small" @click="determine(selectName)">确认</el-button>
        <el-button size="small" @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Littlehow } from "../../assets/js/util";
import { mapMutations } from 'vuex';
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    showType(newValue,oldValue){
      console.log(newValue,oldValue)
    }
  },
  props:['showType'],
  created() {
    axios
      .get("/api/office/getAllOfficeList")
      .then((res) => {
        console.log(res.data.data)
        let datas = res.data.data;
        var format = {
          id: "uid", //菜单编号，作为树形查找id
          root: "", //顶层节点的parentId是root
          pid: "parentUid", //父节点标识字段为parentId
          child: "children", //构造出的树形子节点数组名为children
          sort: { field: "sortNo", direct: 1 },
        }; //排序字段为sortNo，且正序
        // console.log(Littlehow)
        var result = Littlehow.tree.format(datas, format);
        this.data = result
        console.log(this.data)
      })
      .catch((err) => {
        // alert("洒进来的咖啡机啦");
      });
  },
  methods: {
    //负责搜索
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //负责知道点击的是哪一个
    handleNodeClick(data) {
      // console.log(data.name);
      console.log(data)
      // this.selectName = data.name
      this.temp=data
    },
    //确认选择
    determine() {
      console.log("点击了确定")
      this.filterText = ""
      // this.$emit("func",this.temp)
      
      this.$emit("func",this.temp)
      this.$parent.determine()
    },
    // ...mapMutations("Mechanism",{
    //   determine:"setMechanism"
    // }),
    //取消
    cancel() {
      this.filterText = "";
       this.$emit("func",'')
      this.$parent.determine()
      // this.$parent.smallReset()
    }
  },

  data() {
    return {
      filterText: "",
      data: null,
      defaultProps: {
        children: "children",
        label: "name",
      },
      temp:"",
      selectName:null,  //选中的name
    };
  },
};
</script>

<style scoped>
.container{
  background-color: white;
  width: 100%;
  height: 100%;
}
.wrap {
  min-width: 210px;
  position: fixed;
  z-index: 999999999999999999;
  height: 560px;
  background-color: white;
  /* overflow-y:auto; */
  border: 1px solid #ccc;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.listerTree {
  height: 480px;
  overflow-y: auto;
}
.title {
  width: 100%;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 400;
  color: #606266;
  box-sizing: border-box;
  padding-left: 10px;
  background-color:#F9FAFC;
}
.operation{
  /* margin-top: -20px; */
  padding: 5px 0;
  background-color:white;
  border-top: 1px solid #ccc;
}
/deep/ .searchs .el-input__inner{
  width: 190px;
  margin-left: 9px;
}
.cover{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  z-index: 9;
}
</style>